#@layout()

#define main()
#set(isAdd = vehicle == null ? true : false, isEdit = !isAdd)

<div class="jfa-header-box" id="jfa-header-box">
    <div class="jfa-crumbs" id="jfa-crumbs">
        <a href="#(ctx)/admin/vehicleHistory">周转车历史息管理</a> / 追溯码打印
    </div>

    <div class="jfa-search-box"></div>
    #include("/_view/common/_header_right.html")
    <script src="#(ctx)/assets/qrcode/qrcode.js" charset="utf-8"></script>
    <script src="#(ctx)/assets/qrcode/jquery.qrcode.js" charset="utf-8"></script>
    <script src="#(ctx)/assets/qrcode/jquery.qrcode.min.js" charset="utf-8"></script>
    <script src="#(ctx)/assets/jsbarcode/JsBarcode.all.js" CHARSET="utf-8"></script>
    <script src="#(ctx)/assets/jsbarcode/JsBarcode.all.min.js" CHARSET="utf-8"></script>
</div>


<div class="jfa-content-box" id="jfa-content-box">
    <div class="jfa-content" id="jfa-content" style="height: 750px;" >
        <div style="margin-top: 10px;margin-left: 20px;">
            <a class="btn btn-primary btn-sm " href="#" onclick="doPrint()" >
                <i class="fa fa-car"></i>
                打印
            </a>
        </div>
        <div id="printInfo">
            <table align="left" border="1" style="width: 940px;height: 630px;margin-top: 20px;margin-left: 20px;">
                <!-- 第一行 物料编码 二维码-->
                <tr>
                    <td colspan="5" style="height: 150px;width:770px;vertical-align: top;">
                        <span style="font-size: 8px;margin-top: 5px;margin-left:6px;">物料编码:</span>
                        <br>
                        <span id="materialCodeSpan" style="margin-top: 30px;margin-left:6px;font-size: 50px;font-weight: bold;">
                        #(vehicle.material_no??)
                        </span>
                        <br><span  style="margin-top: 20px;margin-left:6px;font-size: 30px;">#(vehicle.materialName??)</span></td>
                    <td colspan="1" style="width: 170px;"><div id="totalCode" style="margin-left: 20px;"></div></td>
                </tr>
                <!-- 第二行 数量 SUT-->
                <tr>
                    <td colspan="3" style="height: 120px;width: 48%;vertical-align: top;">
                        <span  style="font-size: 8px;margin-left:6px;vertical-align: top;">数量:</span>
                        <span id="countSpan" style="margin-left: 100px;font-size: 50px;font-weight: bold;vertical-align: top;">
                        #(vehicle.material_count??)
						</span>
                            <span style="margin-left: 200px;font-size: 30px;vertical-align: top;">PC</span>
                        <div><img id="countBarCode" style="margin-left: 20px;margin-bottom: 5px;"></div></td>
                    <td colspan="3" style="vertical-align: top;"><span style="font-size: 8px;margin-left: 6px;">SUT:</span>
                    <br><div><span style="margin-left: 50px;font-size: 50px;font-weight: bold;vertical-align:bottom;">ST</span>
                        <img id="stimg" style="margin-left: 20px;vertical-align: bottom;"></div></td>
                </tr>
                <!-- 第三行 送达方 日期 工程变更-->
                <tr>
                    <td colspan="3" style="height: 60px;vertical-align: top;"><span style="font-size: 8px;margin-left: 6px;">送达方:</span></td>
                    <td style="width: 230px;vertical-align: top;"><span style="font-size: 8px;margin-left: 6px;">需求日期:</span>
                    <br><span id="currentDate" style="margin-left: 6px;font-size: 30px;font-weight: bold;"></span></td>
                    <td colspan="2" style="vertical-align: top;"><span style="font-size: 8px;margin-left: 6px;">工程变更:</span></td>
                </tr>
                <!-- 第四行  库存地点 包装-->
                <tr>
                    <td colspan="3" style="height: 95px;vertical-align: top;"><span style="font-size: 8px;margin-left: 6px;">库存地点:</span>
                    <br><span id="locationSpan" style="margin-top: 20px;margin-left:6px;font-size: 30px;"></span></td>
                    <td colspan="3" style="vertical-align: top;"><span style="font-size: 8px;margin-left: 6px;">包装:</span>
                    <br><span id="packageSpan" style="margin-top: 20px;margin-left:6px;font-size: 30px;">#(vehicle.status??)</span></td>
                </tr>
                <!-- 第五行 条码号 图标 上下架策略标识-->
                <tr>
                    <td rowspan="3" colspan="3" style="height: 194px;vertical-align: top;"><span style="font-size: 8px;margin-left: 6px;">条码号:</span>
                        <br>
                        <span id="beSpan" style="margin-top: 30px;margin-left: 20px;font-size: 50px;font-weight: bold;">
                        #(vehicle.barcode??)
                        </span>
                        <br><img id="becode" style="margin-left: 10px;"></td>
                    <td rowspan="2" >
                        <img src="#(ctx)/assets/img/logo.png" width="200px;" height="50px;" style="margin-left: 15px;">
                    </td>
                    <td colspan="2" style="vertical-align: top;height: 50px;"><span style="font-size: 8px;margin-left: 6px;">周转车编号:</span>
                        <br><span id="vehicleNo" style="margin-top: 1px;margin-left:6px;font-size: 20px;"></span></td>
                </tr>
                <!-- 第六行 仓位-->
                <tr>
                    <td colspan="2" style="vertical-align: top;"><span style="font-size: 8px;margin-left: 6px;">仓位:</span></td>
                </tr>
                <!-- 第七行 跟踪号-->
                <tr>
                    <td colspan="3" style="height: 94px;vertical-align: top;"><span style="font-size: 8px;margin-left: 6px;">跟踪号:</span>
                        <br><span id="followCodeSpan" style="margin-top: 30px;margin-left: 6px;font-size: 50px;font-weight: bold;">
                        #(vehicle.trace_no??)
                        </span></td>
                </tr>
            </table>
        </div>
    </div><!-- END OF jfa-content -->
</div><!-- END OF jfa-content-box -->

<style type="text/css">
    .jfa-content label {
        line-height: 1;
        vertical-align: baseline;
        color: #23527c;
        font-size: 20px;
        font-weight: normal;
        margin-bottom: 8px;;
    }

    @media print {
        #css_table{
            display: table;
        }
        .css_td{
            display: table-cell;
        }
    }
</style>

<script type="text/javascript">
    var totalStr="F#(vehicle.trace_no??)"+"#"+"#(vehicle.material_no??)"+"#"+"#(vehicle.barcode??)";

    
    $(document).ready(function() {
        var totalArr=totalStr.split("#");
        //右上角二维码h
        jQuery('#totalCode').qrcode({
            render: "canvas", //也可以替换为table
            width: 120,
            height: 120,
            text: totalStr
        });
        var totalCodeImg=$("#totalCode canvas")[0].toDataURL("image/png");
        $("#totalCode").html("<img src='" + totalCodeImg + "'>");

        //数量条形码
        var countStr="#(vehicle.material_count??)";
       // $("#countSpan").html(countStr);
        $("#countBarCode").JsBarcode("Q"+countStr+" ",{
            displayValue:false,
            width: 3,
            height: 40
        });
        //ST条形码，注意最后带空格
        $("#stimg").JsBarcode("ST",{
            displayValue:false,
            width: 3,
            height: 60
        });

        //条码号的条形码
        //$("#beSpan").html(beStr);
        $("#becode").JsBarcode("S0#(vehicle.barcode??)",{
            displayValue:false,
            width: 3,
            height: 60
        });

        //生成当日日期
        getCurrentDate();

        $("#locationSpan").html("BEM1");
        // $("#packageSpan").html("打印测试使用");
        getVehicleNo();
    });

    //打印操作
    function doPrint() {
        var head_str = "<html><head><title></title></head><body>"; //先生成头部
        var foot_str = "</body></html>"; //生成尾部
        var older = document.body.innerHTML;
        var new_str = document.getElementById('printInfo').innerHTML; //获取指定打印区域
        var old_str = document.body.innerHTML; //获得原本页面的代码
        document.body.innerHTML = head_str + new_str + foot_str; //构建新网页
        window.print(); //打印刚才新建的网页
        $.ajax({
			url:"#(ctx)/admin/vehicleHistory/doPrint?id=#(vehicle.id??)",
			dataType:"json",
			success:function(ret){
			},
			error:function(){
			}
		});
        document.body.innerHTML = older; //将网页还原
        location.href = "#(ctx)/admin/vehicleHistory";
    }
    function getCurrentDate(){
        var date=new Date();
        var dateStr= date.getFullYear()+"."+(date.getMonth()+1)+"."+date.getDate();
        $("#currentDate").html(dateStr);
    }
    //显示周转车编号
    function getVehicleNo(){
        var vehicleNoStr="#(vehicle.vehicle_no??)";
        if(vehicleNoStr==null ||vehicleNoStr==""){
            $("#vehicleNo").html("无编号");
        }else{
            $("#vehicleNo").html(vehicleNoStr.substr(5));
        }
    }
</script>
#end